<template>
  <div style="overflow:auto;" ref="activeshow">
    <div style="background:red;overflow:auto;" >
    <el-table
    :data="tableData"
    border
    :height="tableheight"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      fixed
      label="方案"
      width="60">
      <template  slot-scope="scope">
        <i title="方案预览" class="el-icon-tickets" style="font-size:30px;cursor: pointer;" @click="download(scope.row.filePath)"></i>
      </template>
    </el-table-column>
    <el-table-column
      prop="id"
      label="活动编号"
      width="40">
    </el-table-column>
    <el-table-column
      prop="activeName"
      label="活动名称"
      width="180">
    </el-table-column>
    <el-table-column
      label="活动类型"
      width="180"> 
      <template slot-scope="scope">
        <span v-if="scope.row.type==0">院级活动</span>
        <span v-if="scope.row.type==1">校级活动</span>
        <span v-if="scope.row.type==2">社团活动</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="score"
      label="活动分数">
    </el-table-column>
    <el-table-column
      label="可加分数类型">
      <template slot-scope="scope">
        <span v-if="scope.row.secondScore==1">第二课堂分</span>
        <span v-if="scope.row.educationScore==1">德育分</span>
        <span v-if="scope.row.laborScore==1">劳动分</span>
      </template>
    </el-table-column>
    <el-table-column
      label="开始报名时间">
      <template slot-scope="scope">
        <span>{{ FormDataYYYYMMDD(scope.row.createTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="截止报名时间">
      <template slot-scope="scope">
        <span> {{ FormDataYYYYMMDD(scope.row.deadTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="可报名人数">
      <template slot-scope="scope">
        <span v-if="scope.row.peopleCount!=0">{{ scope.row.applicationCount}}/{{ scope.row.peopleCount }}</span>
        <span v-if="scope.row.peopleCount==0">无限</span>
      </template>
    </el-table-column>
    <el-table-column
      label="活动状态">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.status==0" type="info">未开始报名</el-tag>
        <el-tag v-if="scope.row.status==1" type="success">报名中</el-tag>
        <el-tag v-if="scope.row.status==2" type="warning">截止报名</el-tag>
        <el-tag v-if="scope.row.status==3" type="danger">已结束</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="250">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleDetails(scope.row)">详情</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="eventregistration(scope.row.id)">报名</el-button>
          <el-button
          size="mini"
          type="success"
          @click="download(scope.row.filePath)">下载</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div >
    <div style="text-align:center">
      <el-pagination
      background
      :page-size="20"
      :current-page="pageNum"
      layout="prev, pager, next"
      :current-change="CurrentChange"
      :total="total">
    </el-pagination>
    </div>
    <div>
      <el-dialog
        title="详情"
        style="text-align:left"
        :visible.sync="dialogVisible"
        width="35%"
        :before-close="handleClose">
          <span>活动描述：
            <div v-html="activedescription" v-if="activedescription!=''"></div><br>
          </span>
          <span>活动内容：
            <div v-html="activecontent" v-if="activecontent!=''"></div>
          </span>        
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    </div>
</template>

<script>
import axios from 'axios';
import request from '@/util/request';
export default {
    name:'ActiveShow',
    data(){
        return{
          tableData: [],
          total:1,
          pageNum:1,
          dialogVisible:false,
          activedescription:'',//活动描述
          activecontent:'',//活动内容
          tableheight:window.innerHeight*0.7,
          screenWindth:window.innerWidth,
          screenHeight:window.innerHeight,
        }
    },
    mounted(){
        window.addEventListener('resize01',this.handResize);
        this.handResize();
        this.GetAllActiveinformation();
        
        
    },
    beforeDestroy(){
      window.removeEventListener('resize01',this.handResize)
    },
    methods:{
      //页面大小
      handResize(){  
        const height=this.$refs.activeshow.offsetHeight;
        const width=this.$refs.activeshow.offsetWidth ;
        this.screenHeight=window.innerHeight;
        this.screenWindth=window.innerWidth;
      },
      //表格背景颜色
        tableRowClassName({row, rowIndex}) { 
        if (row.status==1) {
          return 'success-row';
        } else if (row.status==2) {
          return 'warning-row';
        }else{
          return 'error-row';
        }
      },
      //获取活动信息
      GetAllActiveinformation(){ 
          request.get(`/user/getAllAActiveInformation?pageNum=${this.pageNum}`).then(res=>{
            this.tableData=res.data.records;
            this.total=res.data.total;
                
          }).catch(err=>{
            if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
          })
      },
      //时间格式转换
      FormDataYYYYMMDD(val){
           return this.$common.formatDateToYYYYMMDD(val);
        },
        //方案下载
        download(path){
          console.log(path);
          request.get(`/file/download?fileName=${path}`).then(res=>{
            console.log('--->',res);
            if(res.data===null){
              this.$notify.error(res.msg)
              return
            }
            this.$notify.success('已成功下载到:'+res.data)     
          }).catch(err=>{
            if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
          })
        },
        //分页发送改变时
        CurrentChange(val)
        {
          this.GetAllActiveinformation();
        },
        //活动报名
        eventregistration(id){  
          request.get(`/user/EvenRegistration?activeId=${id}`).then((res) => {
            if(res.data==true)
            {
              this.$notify.success({
                   title:'成功',
                   message:'报名成功'
                })
                this.GetAllActiveinformation();
            }else{
              this.$notify.warning({
                   title:'失败',
                   message:'报名失败'
                })
            }
                

          })
          .catch(err =>{
          console.log('错误信息：',err.message)
          if (err.response) {
                console.error(err)
                this.$notify.error({
                  title:'错误',
                  message:err.message
                })
              } else {
                this.$notify.error({
                  title:'错误',
                  message:'网络错误'
                })
            }
             }
          )
        },
        //详情弹窗关闭
        handleClose(done) {
          done();
      },
      //活动信息内容查看
      handleDetails(val){
        if(this.dialogVisible==false)
        {
          this.activedescription=val.activeDescription;
          this.activecontent=val.activeContent;
        }
        else
        {
          this.activecontent='';
          this.activedescription='';
        }
        this.dialogVisible=!this.dialogVisible;
      }

    },

}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table .error-row {
    background: #f1858a96;
  }
  .el-dialog__body[data-v-30164c15] {
    color: #606266;
    font-size: 14px;
}
</style>